import React from 'react'

const sepStyle = { marginRight: "8px", paddingRight: "8px", borderRight: "1px solid #e0e0e0" }
export default (props: any) => {
    const { item } = props

    return <>

        <tr style={{ border: "none", height: "20px" }}></tr>
        <tr style={{ backgroundColor: "#F7F7F7" }}>
            <td colSpan={6} style={{ color: "rgb(117,117,117)" }}>
                <span style={sepStyle}>{item.order_at_format}</span>
                <span style={sepStyle}>订单号：{item.order_no}</span>
                <span >{item.shop_title}</span>
            </td>
        </tr>
        {
            item.order_sku_list.map((v: any, k: number) => {
                return (
                    <tr key={k}>
                        <td style={{ display: "flex" }}>
                            <div style={{ width: "60px", height: "60px" }}>
                                <img src={v.goods_logo} alt="" style={{ width: "100%" }} />
                            </div>
                            <div style={{ marginLeft: "5px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
                                <div>{v.goods_name}</div>
                                <span style={{ color: "#999", fontSize: "12px" }}>实物商品</span>
                            </div>
                        </td>
                        <td style={{ borderRight: "1px solid #F1F1F1" }}>￥{v.price} x {v.num}</td>
                        {k === 0 && <td rowSpan={item.order_goods_list.length} valign="top" style={{ textAlign: "center", borderRight: "1px solid #F1F1F1" }}>
                            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                                <span>总额￥{item.pay_amount}</span>
                                <div style={{ width: "60%", borderTop: "solid 1px #E5E5E5" }}>{item.pay_way_title}</div>
                            </div>
                        </td>}
                        {k === 0 && <td rowSpan={item.order_goods_list.length} valign="top" style={{ borderRight: "1px solid #F1F1F1" }}>
                            <div style={{ fontWeight: 600 }}>{item.receiver_name}</div>
                            <div style={{ color: "#666" }}>{item.receiver_mobile}</div>
                            <div style={{ color: "#666" }}>{item.receiver_address}</div>
                        </td>}
                        {k === 0 && <td rowSpan={item.order_goods_list.length} valign="top" style={{ textAlign: "center", borderRight: "1px solid #F1F1F1" }}>交易中</td>}
                        {k === 0 && <td rowSpan={item.order_goods_list.length} valign="top" style={{ textAlign: "center" }}>详情</td>}
                    </tr>
                )
            })
        }
    </>
}